<template>
	<div class="zh-table">
		<div class="zh-table-open clear">
			<div class="zh-open-left fl">
				<div class="open-width">
					<el-select v-model="sensitiveStatusDataParam.status" filterable placeholder="请选择">
					   <el-option label="全部状态" value=""></el-option>
					   <el-option label="已通过" value="1"></el-option>
					   <el-option label="已拒绝" value="0"></el-option>
					   <el-option label="审核中" value="2"></el-option>
					</el-select>
				</div>
				<div class="open-width">
					<el-input v-model="keyword" placeholder="请输入敏感词搜索" @keyup.enter.native="search"></el-input>
				</div>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button type="primary" @click="reset">重置</el-button>
			</div>
			<div class="zh-open-right fr">
				
			</div>
		</div>
		<div class="zh-table-contents">
			<el-table
			    :data="sensitiveStatusData"
			    border
			    max-height="600"
			    style="width: 100%">
			    <el-table-column
			      type="index"
                  :index="typeIndex"
			      label="序号"
			      align="center"
			      show-overflow-tooltip
			      width="50"
			      >
			    </el-table-column>
				<el-table-column
					prop="type_string"
					label="来源"
					align="center"
					show-overflow-tooltip
					>
				</el-table-column>
			    <el-table-column
			      prop="s_content"
			      label="敏感词"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="catename"
			      label="敏感词分类"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="status_txt"
			      label="状态"
			      align="center"
			      show-overflow-tooltip
			      >
			      	<template slot-scope="scope">
			      		<span v-if="parseInt(scope.row.status) === 1">已通过</span>
			      		<span v-if="parseInt(scope.row.status) === 2">审核中</span>
			      		<span v-if="parseInt(scope.row.status) === 0">已拒绝</span>
			      	</template>
			    </el-table-column>
			    <el-table-column
			      prop="username"
			      label="发表人账号"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="create_time"
			      label="发表时间"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      label="操作"
			      align="center"
			      >
			      	<template slot-scope="scope">
		      	        <el-button @click="showContent(scope.row.c_content)" type="text">查看</el-button>
		      	        <el-button @click="approve_confirm(scope.row.ssid,scope.row.comment_id)" v-if="parseInt(scope.row.status) ===2" type="text" class="approve-button">批准</el-button>
		      	        <el-button @click="refuse_confirm(scope.row.ssid,scope.row.comment_id)" v-if="parseInt(scope.row.status) ===2" type="text" class="delete-button">拒绝</el-button>
		      	         <el-button @click="delete_confirm(scope.row.ssid)" v-if="parseInt(scope.row.status) !=2" type="text" class="delete-button">删除</el-button>
		      	    </template>
			    </el-table-column>
			</el-table>
			<div class="table-pagination" v-show="total_number > 10">
				<el-pagination
				    @size-change="handleSizeChange"
				    @current-change="handleCurrentChange"
				    :current-page="sensitiveStatusDataParam.page_index"
				    :page-sizes="[10, 20, 30, 40, 50, 100]"
				    :page-size="sensitiveStatusDataParam.page_size"
				    layout="total, sizes, prev, pager, next, jumper"
				    :total="total_number">
				</el-pagination>
				<div class="pagination-button">
					<el-button 
						@click="getAuthSensitive"
						type="primary" icon="el-icon-refresh" 
						circle title="刷新数据" size="mini" >
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	sensitiveStatusDataParam:{
		    		status:'',
		       		keyword: '',
		       		page_index:1,
		       		page_size:10
		        },
		        keyword: '',
		        value: '',
		        input: '',
		        sensitiveStatusData: [],
                total_number: 0,//共几条
		    }
		},
		created(){
			this.getAuthSensitive();
	    },
		methods: {
			// 序号
            typeIndex(index) {
                return index + (this.sensitiveStatusDataParam.page_index - 1) * this.sensitiveStatusDataParam.page_size + 1;
            },
		    handleSizeChange(val) {
		    	this.sensitiveStatusDataParam.page_index = 1;
		    	this.sensitiveStatusDataParam.page_size = val;
		    	this.getAuthSensitive();
		    },
		    handleCurrentChange(val) {
		        this.sensitiveStatusDataParam.page_index = val;
		        this.getAuthSensitive();
			},
			search() {
				this.sensitiveStatusDataParam.keyword = this.keyword;
		        this.sensitiveStatusDataParam.page_index = 1;
				this.getAuthSensitive();
			},
			reset() {
				this.keyword = '';
                this.sensitiveStatusDataParam.status = '';
				this.sensitiveStatusDataParam.keyword = '';
                this.sensitiveStatusDataParam.page_index = 1;
                this.sensitiveStatusDataParam.page_size = 10;
				this.getAuthSensitive();
			},
		    getAuthSensitive(){
		    	// 重写成功回调
				let success = ( data => {
					this.sensitiveStatusData = data.data.data;
					this.total_number = data.data.data_sum;
				});
  				this.$ajax.get('api/setting/sensitive_status_data',{params:this.sensitiveStatusDataParam,func:{success:success}})
		    	
		    },
			approve_confirm(id,comment_id){
				let yes = ( data => {
					this.approve(id,comment_id);
				})
				let cancel = ( data => {
				})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定批准吗？'});

			},
			approve(id,comment_id){
				let success = ( data => {
					this.$message.success(data.msg);
					this.getAuthSensitive();
				});
  				this.$ajax.post('api/setting/sensitive_recorder',{id:id,commentid:comment_id},{func:{success:success}})
			},
			refuse_confirm(id,comment_id){
				let yes = ( data => {
					this.refuse(id,comment_id);
				})
				let cancel = ( data => {
				})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定拒绝吗？'});

			},
			refuse(id,comment_id){
				let success = ( data => {
					this.$message.success(data.msg);
					this.getAuthSensitive();
				});
  				this.$ajax.put('api/setting/sensitive_recorder',{id:id,commentid:comment_id},{func:{success:success}})
			},
			delete_confirm(id){
				let yes = ( data => {
					this.delete(id);
				})
				let cancel = ( data => {
				})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定删除吗？'});

			},
			delete(id){

				let success = ( data => {
					this.$message.success(data.msg);

					if (this.sensitiveStatusData.length - 1 === 0) {
						if (this.sensitiveStatusDataParam.page_index > 1) {
							this.sensitiveStatusDataParam.page_index--;
						} else {
							this.sensitiveStatusDataParam.page_index = 1;
						}
					}

					this.getAuthSensitive();
				});
  				this.$ajax.delete('api/setting/sensitive_recorder',{params:{id:id},func:{success:success}})
			},
			showContent(txt){
				this.$alert(txt, '评论内容',{showConfirmButton:false,callback: action => {}});
			}
		},
  	}
</script>